<template>
    <div>
<!--        <tips-info></tips-info>-->
        <div class="success-page">
            <div class="content-page11" :style="{borderColor: getColor}">
                <notice-bar :color="getColor" :type="userInfo.type" :bg="getBgColor"></notice-bar>
                <div class="title" style="width: 220px;margin-bottom: 2px;font-weight: bold">
                    <div>
                        专 &nbsp;&nbsp;属 &nbsp;&nbsp;凭 &nbsp;&nbsp;证
                    </div>
                    <div>
                        市 &nbsp;&nbsp;内 &nbsp;&nbsp;通 &nbsp;&nbsp;行
                    </div>
                </div>
                <div class="qrcode">
                    <div class="box" style="width: 200px;height: 200px;padding: 10px;" :style="{borderColor:getColor}">
<!--                        <div class="box" style="width: 212px;height: 211px" :style="{borderColor:getColor}">-->
                        <template v-if="loading" style="text-align:center;">
                            <van-row>
                                <van-col span="24" style="margin-top:80px; text-align:center;">
                                    <van-loading type="spinner" size="36px"
                                                 text-size="20px" vertical>
                                        加载中
                                    </van-loading>
                                </van-col>
                            </van-row>
                        </template>
<!--                        <canvas id="qrCode" ref="qrCode"></canvas>-->
                        <div id="qrCode" ref="qrCode"></div>
                    </div>
                </div>
                <div class="user-info">
                    <van-row type="flex" justify="center">
                        <van-col span="12" style="font-size: 14px;text-align:center;margin-bottom: 5px">
                            <span style="color: red">{{totalTime}}</span>秒后自动刷新
                        </van-col>
                    </van-row>
                    <div class="table-info" :style="{borderColor:getColor}">
                        <van-row style="border-bottom:1px solid;text-align: center" class="table-info-row2"
                                 :style="{borderColor:getColor}">
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                <div>姓名</div>
                            </van-col>
                            <van-col span="6" class="table-info-row2-col table-right-border value"
                                     :style="{borderColor:getColor}">
                                {{userInfo.name}}
                            </van-col>
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                性别
                            </van-col>
                            <van-col span="3" class="table-info-row2-col table-right-border value"
                                     :style="{borderColor:getColor}">
                                {{userInfo.sex}}
                            </van-col>
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                年龄
                            </van-col>
                            <van-col span="3" class="table-info-row2-col value">
                                {{userInfo.newAge}}
                            </van-col>
                        </van-row>
                        <van-row class="table-info-row2" type="flex" align="center">
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                住所
                            </van-col>
                            <van-col span="20" class="table-info-row2-col value hd-ellipsis"
                                     style="padding:5px;justify-content: left;">
                                {{userInfo.loc_title}}
                                <!--                                {{userInfo.loc_address}}-->
                            </van-col>
                        </van-row>
                    </div>
                    <div class="table-info" :style="{borderColor:getColor}"
                         v-for="(item,index) in personList" :key="index">
                        <van-row style="border-bottom:1px solid;text-align: center;"
                                 class="table-info-row2"
                                 :style="{borderColor:getColor}">
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                <div>姓名</div>
                            </van-col>
                            <van-col span="8" class="table-info-row2-col table-right-border value"
                                     :style="{borderColor:getColor}">
                                {{item.name}}
                            </van-col>
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                关系
                            </van-col>
                            <van-col span="8" class="table-info-row2-col value">
                                {{item.relation}}
                            </van-col>
                        </van-row>
                        <van-row class="table-info-row2" type="flex" align="center" @click="getRandomNumber1Action(item)">
                            <van-col span="24" class="table-info-row2-col value hd-ellipsis" :style="{borderColor:getColor,color:getColor}">
                                查看健康码
                            </van-col>
                        </van-row>
                    </div>
                    <div class="table-info" :style="{borderColor:getColor}"
                         v-for="(item,index) in childrenList" :key="index">
                        <van-row style="border-bottom:1px solid;text-align: center"
                                 class="table-info-row2"
                                 :style="{borderColor:getColor}">
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                <div>姓名</div>
                            </van-col>
                            <van-col span="8" class="table-info-row2-col table-right-border value"
                                     :style="{borderColor:getColor}">
                                {{item.name}}
                            </van-col>
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                关系
                            </van-col>
                            <van-col span="8" class="table-info-row2-col value">
                                {{item.relation}}
                            </van-col>
                        </van-row>
                        <van-row class="table-info-row2" type="flex" align="center" @click="getRandomNumber1Action(item)">
                            <van-col span="24" class="table-info-row2-col value hd-ellipsis" :style="{borderColor:getColor,color:getColor}">
                                查看健康码
                            </van-col>
                        </van-row>
                    </div>
                </div>
                <van-row class="btn-round" type="flex" justify="space-around">
                    <van-col span="6" class="van-row--justify-center van-row--flex"
                             @click="jumpPageAction('epidemic-update-new')">
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :size="fontSize"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :stroke-width="20">
                            <div class="z100">信息</div>
                            <div class="z100">修改</div>
                        </van-circle>
                    </van-col>
                    <van-col span="6" class="van-row--justify-center van-row--flex"
                             @click="jumpPageAction('epidemic-check-platform')">
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :stroke-width="20"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :size="fontSize">
                            <div class="z100">申请</div>
                            <div class="z100">复核</div>
                        </van-circle>
                    </van-col>
                    <van-col span="6" class="van-row--justify-center van-row--flex"
                             @click="jumpPageAction('epidemic-newly-added')">
                        <!--                             @click="daiban()">-->
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :size="fontSize"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :stroke-width="20">
                            <div class="z100">申请</div>
                            <div class="z100">代办</div>
                        </van-circle>
                    </van-col>
                    <van-col span="6" class="van-row--justify-center van-row--flex"
                             @click="jumpPageAction('epidemic-day-submit')">
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :size="fontSize"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :stroke-width="20">
                            <div class="z100">每日</div>
                            <div class="z100">自查</div>
                        </van-circle>
                    </van-col>
                </van-row>
                <van-row class="btn-round" type="flex" style="margin-bottom: 50px">
                    <van-col span="6" class="van-row--justify-center van-row--flex" @click="obtainEmployment">
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :size="fontSize"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :stroke-width="20">
                            <div class="z100">就业</div>
                            <div class="z100">服务</div>
                        </van-circle>
                    </van-col>
                    <van-col span="6" class="van-row--justify-center van-row--flex"
                             @click="jumpPageAction('epidemic-remote-inquiry')">
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :stroke-width="20"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :size="fontSize">
                            <div class="z100">心理</div>
                            <div class="z100">咨询</div>
                        </van-circle>
                    </van-col>
                    <van-col span="6" class="van-row--justify-center van-row--flex"
                             @click="jumpPageAction('mine-complaint-submit')">
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :size="fontSize"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :stroke-width="20">
                            <div class="z100">投诉</div>
                            <div class="z100">举报</div>
                        </van-circle>
                    </van-col>
                    <van-col span="6" class="van-row--justify-center van-row--flex" @click="tips">
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :stroke-width="20"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :size="fontSize">
                            <div class="z100">电子</div>
                            <div class="z100">票券</div>
                        </van-circle>
                    </van-col>
                </van-row>
            </div>
        </div>
        <van-popup lazy-render="false" v-model="relationShow">
            <div class="relationtitle" style="width: 220px;margin-bottom: 2px;font-weight: bold">
                <div>
                    专 &nbsp;&nbsp;属 &nbsp;&nbsp;凭 &nbsp;&nbsp;证
                </div>
                <div>
                    市 &nbsp;&nbsp;内 &nbsp;&nbsp;通 &nbsp;&nbsp;行
                </div>
            </div>
            <div :style="{borderColor:getColorRelation}" id="relationQrCode" ref="relationQrCode"></div>
            <div class="table-info" :style="{borderColor:getColor}">
                <van-row style="text-align: center"
                         class="table-info-row2"
                         :style="{borderColor:getColorRelation}">
                    <van-col span="4" class="table-info-row2-col table-right-border title-x"
                             :style="{borderColor:getColorRelation}">
                        <div>姓名</div>
                    </van-col>
                    <van-col span="8" class="table-info-row2-col table-right-border value"
                             :style="{borderColor:getColorRelation}">
                        {{itemName}}
                    </van-col>
                    <van-col span="4" class="table-info-row2-col table-right-border title-x"
                             :style="{borderColor:getColorRelation}">
                        关系
                    </van-col>
                    <van-col span="8" class="table-info-row2-col value">
                        {{itemRelation}}
                    </van-col>
                </van-row>
            </div>
        </van-popup>
        <van-tabbar>
<!--            <van-tabbar-item url="https://mp.weixin.qq.com/s/BQKXZgb3YHiy38csfv9cjQ">-->
            <van-tabbar-item url="https://mp.weixin.qq.com/s/A8qplEc5mSEtNdYchgDsJQ">
                <van-icon name="chat-o"/>
                常见问题
<!--                客服电话：12345-->
            </van-tabbar-item>
            <!--<van-tabbar-item icon="service-o" name='2' url="https://mp.weixin.qq.com/s/TRLYCrEDWHg0CYRPkeaSWw">视频客服
            </van-tabbar-item>-->
        </van-tabbar>
    </div>
</template>

<script>
import { getOpenidMsg, SelectRandomNumber, findPermitPersonList, getHealthInfofm, getRandomNumber1 } from '@/api/yi-qing-fang-kong.js'
import distData from '@/libs/dist.js'
import wx from 'weixin-js-sdk'
import QRcode from 'qrcodejs2'
import { drawCertQrCode } from '@/libs/tools'
import VConsole from 'vconsole'
import NoticeBar from '../../../components/notice-bar/index'
// import TipsInfo from '../../../components/tips-info/index'

export default {
  components: { NoticeBar },
  data () {
    return {
      itemName: '',
      itemRelation: '',
      cardTypeRelation: 1,
      relationShow: false,
      id: '',
      fontSize: '60',
      currentRate: 0,
      circleColor: '#DDDDDD',
      fillColor: '#f5f5f5',
      userInfo: {
        name: '暂无',
        address: '暂无',
        sex: '暂无',
        newAge: '暂无',
        loc_address: ''
      },
      randomNum: '',
      totalTime: 0,
      con: 0,
      offsetheight: document.documentElement.clientHeight - 10,
      qrColor: distData.qrColor,
      fontColor: distData.fontColor,
      borderColor: distData.borderColor,
      bgColor: distData.bgColor,
      cardType: 1,
      loading: false,
      openid: '',
      personList: [],
      childrenList: [],
      language: distData.language
    }
  },
  computed: {
    getColorRelation () {
      return this.qrColor[this.cardTypeRelation]
    },
    getColor () {
      return this.qrColor[this.cardType]
    },
    getCircleColor () {
      return this.borderColor[this.cardType]
    },
    getFillColor () {
      return this.qrColor[this.cardType]
    },
    getFontColor () {
      return this.fontColor[this.cardType]
    },
    getBgColor () {
      return this.bgColor[this.cardType]
    }
  },
  methods: {
    getRandomNumber1Action (data) {
      getRandomNumber1({ card_no: data.cardno }).then(ret => {
        if (ret.data.errcode === 0) {
          this.relationShow = true
          this.cardTypeRelation = ret.data.data.type
          this.itemName = data.name
          this.itemRelation = data.relation
          setTimeout(() => { // 此处模拟异步调数据
            this.relationQrCode(ret.data.data.num, ret.data.data.type)
          })
        } else {
          this.$notify({ type: 'danger', message: ret.data.errmsg })
        }
      })
    },
    relationQrCode (num, type) {
      this.$refs.relationQrCode.innerHTML = ''
      console.log('二维码生成时候的随机码', num)
      let qrcode = new QRcode('relationQrCode', {
        width: 200,
        height: 200, // 高度
        text: this.$common.xeUtils.locat().origin + '/#/epidemic-submit-success-public-new?randomNum=' + num, // 二维码内容
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: this.qrColor[type], // 二维码颜色
        colorLight: '#ffffff' // 二维码背景色
      })
      console.log(qrcode)
    },
    daiban () {
      this.$dialog.alert({
        message: '代办功能正在进行升级!'
      }).then(() => {

      })
    },
    getNewQrcode () {
      getHealthInfofm().then(ret => {
        console.log(ret.data, '返回的信息')
        if (ret.data.errcode === 0) {
          // this.loading = false
          // this.name = ret.data.data.name
          let srt1 = JSON.parse(ret.data.data.result)
          let srt2 = JSON.parse(srt1.data)
          let srt3 = JSON.parse(srt2.data)
          let srt4 = JSON.parse(srt3.bizPackage)
          console.log(srt4)
          this.imgStream = ret.data.data
          if (this.imgStream) {
            drawCertQrCode({
              id: 'qrCode', // canvas 绘制层ID
              color: this.getColor, // 二维码颜色
              logoID: '', // logo图片ID
              widthBlock: 4, // 白边为4个模块
              multi: 5, // 放大倍数 支持小数
              width: 105, // 由请求响应包 width得到，非固定值
              codeContent: srt4.bizData.imgStream
            })
            // 上传到服务器（这里是上传到阿里云，this.oss是直接把阿里云的oss连接作为Vue对象的属性来调用,put是上传文件的方法）
            // this.oss.put('qrcode' + Math.random() * 10 + '.png', file).then(result => {
            //   this.qrcode = result.url // 将已上传的图片的url赋值给img的src
            // })
          }
          // this.userinfo = ret.data.data
          // this.tel = this.changeTel(ret.data.data.tel)
          // this.user_img = 'https://life-photo.oss-cn-beijing.aliyuncs.com/' + ret.data.data.card_no + '.jpg'
          // this.userinfo['age'] = getAgeByIdCard(this.userinfo.card_no)
        } else {
          // this.dialogShow = true
          this.$notify({ type: 'danger', message: ret.data.errmsg })
        }
      })
    },
    obtainEmployment () {
      this.$router.push({
        name: 'obtain-employment'
      })
    },
    findPermitPersonList () {
      findPermitPersonList().then(ret => {
        if (ret.data.errcode === 0) {
          if (ret.data.data.result.personList.length > 2) {
            let list = JSON.parse(ret.data.data.result.personList)
            for (let i = 0; i < list.length; i++) {
              if (list[i].name.length === 2) {
                list[i].name = list[i].name.substr(0, 1) + '*'
              } else {
                list[i].name = this.desensitization(list[i].name, 1, -1)
              }
            }
            this.personList = list
          }
          if (ret.data.data.result.childrenList.length > 2) {
            let list = JSON.parse(ret.data.data.result.childrenList)
            for (let i = 0; i < list.length; i++) {
              if (list[i].name.length === 2) {
                list[i].name = list[i].name.substr(0, 1) + '*'
              } else {
                list[i].name = this.desensitization(list[i].name, 1, -1)
              }
            }
            this.childrenList = list
          }
        }
      })
    },
    desensitization (str, beginLen, endLen) {
      let len = str.length
      let firstStr = str.substr(0, beginLen)
      let lastStr = str.substr(endLen)
      let middleStr = str.substring(beginLen, len - Math.abs(endLen)).replace(/[\s\S]/ig, '*')
      let tempStr = firstStr + middleStr + lastStr
      return tempStr
    },
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    getRandomNumber () {
      // 调取随机串接口
      this.loading = true
      SelectRandomNumber().then(ret => {
        let data = ret.data
        console.log('定时生成串回调', data)
        if (data.errcode === 0) {
          this.randomNum = data.data.num
          this.totalTime = data.data.surplus_second
          this.bindQRCode()
        }
        this.loading = false
      })
    },
    interval () {
      let _this = this
      this.con = setInterval(() => {
        // console.log('倒计时', _this.totalTime)
        if (_this.totalTime === 0) {
          // 清空渲染的二维码
          console.log('执行刷新')
          _this.$refs.qrCode.innerHTML = ''
          _this.totalTime = 60
          // 调用随机码
          _this.getRandomNumber()
          // _this.getNewQrcode()
          return false
        } else {
          _this.totalTime -= 1
        }
      }, 1000)
    },
    bindQRCode () {
      console.log('二维码生成时候的随机码', this.randomNum)
      let qrcode = new QRcode('qrCode', {
        width: 200,
        height: 200, // 高度
        text: this.$common.xeUtils.locat().origin + '/#/epidemic-submit-success-public-new?randomNum=' + this.randomNum, // 二维码内容
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: this.getColor, // 二维码颜色
        colorLight: '#ffffff' // 二维码背景色
      })
      console.log(qrcode)
    },
    jumpPageAction (name) {
      clearInterval(this.con)
      this.$router.push({
        name: name
      })
    },
    tips () {
      this.$dialog.alert({
        message: '敬请期待！'
      })
    },
    getOpenidMsgAction () {
      getOpenidMsg({ isTuoMin: '1' }).then(ret => {
        if (ret.data.errcode === 0) {
          let data = ret.data.data.result
          if (data) {
            data.name.replace('?', '')
            this.userInfo = data
            if (data.type.toString() === '8') {
              this.cardType = '1'
            } else {
              this.cardType = data.type
            }
            if (data.type.toString() === '10') {
              this.$dialog.alert({
                message: '您的信息正在审核中！'
              }).then(() => {
                wx.closeWindow()
              })
            } else if (data.type.toString() === '2') {
              this.$dialog.alert({
                message: '您提报的个人基本信息错误，健康通行码已经失效，请您即刻修改，避免影响您的信用等级和出行使用。'
              }).then(() => {
                this.$router.push({ name: 'epidemic-update-new' })
              })
            } else if (data.type.toString() === '9') {
              this.$dialog.alert({
                message: this.language.successAlertNow
              }).then(() => {
                wx.closeWindow()
              })
            } else if (data.type.toString() === '1' || data.type.toString() === '3' || data.type.toString() === '4' || data.type.toString() === '8') {
              this.interval()
              if (data.childrenList &&
data.childrenList !== '' &&
data.childrenList !== undefined &&
data.childrenList !== null &&
data.childrenList !== 'Array' &&
data.personList &&
data.personList !== '' &&
data.personList !== undefined &&
data.personList != null &&
data.personList !== 'Array') {
                if (data.childrenList.length > 2) {
                  this.childrenList = JSON.parse(data.childrenList)
                  console.log(this.childrenList)
                }
                if (data.personList.length > 2) {
                  this.personList = JSON.parse(data.personList)
                  console.log(this.personList)
                }
              } else {
                this.findPermitPersonList()
              }
            } else {
              this.$dialog.alert({ message: '此人信息状态异常' })
            }
          } else {
            console.log('没有此人信息')
            this.$dialog.alert({
              message: '欢迎您办理通行证'
            }).then(() => {
              let debug = this.$route.query.debug
              let query = {}
              if (debug === 'debug') {
                query = { debug: debug }
              }
              this.$router.push({
                name: 'epidemic-submit-new',
                query: query
              })
            })
          }
        } else if (ret.data.errcode === 9999 || ret.data.errcode === 9991) {
          this.$dialog.alert({
            message: '欢迎您办理通行证'
          }).then(() => {
            let debug = this.$route.query.debug
            let selfTs = this.$route.query.selfTs
            let query = {}
            if (debug === 'debug') {
              query = { debug: debug }
            }
            if (selfTs === 'selfTs') {
              query = { selfTs: selfTs }
            }
            this.$router.push({
              name: 'epidemic-submit-new',
              query: query
            })
          })
        } else {
          this.failNotice(ret.data.errmsg)
        }
      })
    }
  },
  mounted () {
    this.getOpenidMsgAction()
    if (this.$route.query.debug === 'debug') {
      let a = new VConsole()
      console.log(a)
      this.debug = true
    }
  },
  beforeDestroy () {
    clearInterval(this.con)
  }
}
</script>

<style scoped lang="less">
    .hd-ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }

    @borderColor: #f5f5f5;
    .success-page {
        background-image: url("../../../assets/images/showinfo/bg.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        min-height: 667px;
        display: flex;
        justify-content: center;

        .header {
            width: 100%;
            height: 175px;
            text-align: center;

            .font-one {
                margin-top: 20px;
                font-size: 25px;
                color: white;
                font-weight: 900;
            }

            .font-two {
                margin-top: 8px;
                font-size: 13px;
                color: white;
            }
        }

        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0px;
            text-align: center;
            display: flex;
            justify-content: center;
            font-size: 12px;
            color: #1989FA;

            .bottom-font {
                margin-right: 10px;
            }
        }

        .content-page11 {
            overflow: hidden;
            margin-top: 5.5rem;
            background-color: white;
            border-radius: 5px;
            width: 280px;
            height: auto;
            padding-bottom: 25px;
            border: 1px solid;

            .qrcode {
                display: flex;
                justify-content: center;
            }

            .qrcode .box {
                border: 1px solid red;
            }

            .title {
                /*padding-top: 15px;*/
                /*letter-spacing: 0.375rem;*/
                display: flex;
                justify-content: space-between;
                margin: 0 auto;
                font-size: 12px;
                color: red;
            }
        }

        .user-info {
            padding: 10px;

            .name {
                color: #363636;
                font-weight: bold;
            }

            .address {
                font-size: 14px;
            }
        }
    }

    .out-button {
        margin-top: 10px;
    }

    .button {
        text-align: center;

        .van-button {
            height: 1.75rem;
            line-height: 1.625rem;
        }

        .van-button--normal {
            font-size: 0.75rem;
            padding: 0 1.375rem
        }

        .van-button--primary {
            color: black;
            background-color: #f9f9f9;
            border: 1px solid #DDDDDD
        }
    }

    .button-two {
        margin-left: 15px;
    }

    .button-h {
        text-align: center;
        margin-top: 5px;

        .van-button {
            height: 1.75rem;
            line-height: 1.625rem;
        }

        .van-button--normal {
            font-size: 0.75rem;
            padding: 0 1.375rem
        }

        .van-button--primary {
            color: black;
            background-color: #f9f9f9;
            border: 1px solid #DDDDDD
        }
    }

    .title-x {
        font-size: 14px;
    }

    .value {
        color: #787878;
        font-size: 13px;
    }

    .table-info {
        padding: 0px 4px 0 4px;
        border: 1px solid @borderColor;
        margin-bottom: 10px;

        .table-info-row {
            display: flex;
            align-items: center;
        }

        .table-info-row2 {
            height: 45px;

            .table-right-border {
                border-right: 1px solid @borderColor;
            }

            .table-left-border {
                margin-left: -1px;
                border-left: 1px solid #DDDDDD;
                padding: 5px 0 5px 0;
            }

            .table-right-border-end {
                padding: 5px 0 5px 0;
            }

            .table-info-row2-col {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .table-col {
            display: flex;
            align-items: center;
            padding: 5px 0 5px 0;

            .address-width {
                width: 50px;
            }
        }
    }

    .table-info:last-child {
        margin-bottom: 0;
    }

    .btn-round {
        margin-top: 10px;

        .round {
            border-right: 1px solid red;
            border-radius: 50%;
        }
    }

    .wl-circle {
        display: flex;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        box-shadow: 2px 2px 5px #696767;
    }

    .z100 {
        font-size: 12px;
        z-index: 100;
        color: #FFFFFF;
    }

    /deep/ .van-tabbar {
        z-index: 9999;
    }

    .van-tabbar-item--active {
        color: #646566;
    }
    #qrCode {
        width: 180px;
        height: 180px;
    }
    #relationQrCode{
        padding: 10px;
        border: 1px solid;
        margin-bottom: 10px;
    }
    .relationtitle{
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        font-size: 12px;
        color: red;
    }
    .van-popup {
        padding: 10px;

        .table-info {
            padding: 0px 4px 0 4px;
            border: 1px solid @borderColor;

            .table-info-row {
                display: flex;
                align-items: center;
            }

            .table-info-row2 {
                height: 45px;

                .table-right-border {
                    border-right: 1px solid @borderColor;
                }

                .table-left-border {
                    margin-left: -1px;
                    border-left: 1px solid #DDDDDD;
                    padding: 5px 0 5px 0;
                }

                .table-right-border-end {
                    padding: 5px 0 5px 0;
                }

                .table-info-row2-col {
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            .table-col {
                display: flex;
                align-items: center;
                padding: 5px 0 5px 0;

                .address-width {
                    width: 50px;
                }
            }
        }
    }
</style>
